<template>
	<view class="pagebody">
		<view class="bgfff">
			<view class="topbox">
				<view class=" justify-between align-center">
					<view class=" flex-row align-center">
						<image @click="backpage" src="@/static/images/login/leftjt.png" alt=""
							style="width: 48rpx;height: 48rpx;"></image>
						<view class="flex-row"
							style="padding: 12rpx 32rpx;background: linear-gradient(125deg, rgba(245, 254, 252, 0.4) 0%, rgba(231, 252, 248, 0.4);border-radius: 48rpx ;">
							<view class="fwbold" style="color: #00977C; font-size: 28rpx;">
								{{disname}}
							</view>
							<image src="../../static/images/forum/right.png" style="width: 40rpx;height: 40rpx;"
								mode=""></image>
						</view>

					</view>

					<!-- <image @click="tosearch" src="@/static/images/forum/search.png" alt=""
						style="width: 48rpx;height: 48rpx;"></image> -->
				</view>
			</view>
		</view>
		<view class="bgfff" style="padding: 0 24rpx;">
			<view class="justify-between align-center"
				style="padding: 0 24rpx;height: 152rpx;border-bottom: 1rpx dashed #D7DDDC;">
				<view class="flex-row">
					<image :src="baseUrl+forumd.invAvatar"
						style="margin-right: 24rpx;width:80rpx;height: 80rpx;border-radius: 50%;" mode=""></image>
					<view class="">
						<view class="flex-row">
							<span class="color303b39 fwbold fz32">{{forumd.invName}}</span>
						</view>
						<view class="mt15 flex-row fz24 align-center" style="color: #7E8987;">
							<span class=""
								style="margin-right: 24rpx;margin-top: 4rpx;">{{ forumd.createTime ? forumd.createTime : forumd.updateTime }}</span>
							<!-- <span>IP属地:{{forumd.userArea}}</span> -->
						</view>
					</view>
				</view>
				<!-- 				<view class="justify-center align-center"
					style="font-weight: 500;width: 128rpx;height: 64rpx;background: linear-gradient( 125deg, #F5FEFC 0%, #E7FCF8 100%);border-radius: 48rpx;color: #00977C;font-size: 32rpx;">
					关注
				</view> -->
			</view>
			<view class="color303b39 fz40 fwbold" style="line-height: 72rpx;margin-top: 9rpx;">
				{{forumd.title}}
			</view>
			<view class="content" v-html="forumd.content">
			</view>
			<view v-if="forumd.attachFiles && forumd.attachFiles.length > 0" class="flex-wrap justify-start " style="">

				<view v-for="(item,index) in forumd.attachFiles" :key="index" class="imgbox " @click="watchimg(index)"
					:style="{ background: 'url(' + item.url + ') no-repeat' }">
				</view>
			</view>
			<view class="align-center justify-around" style="height: 172rpx;border-top: 1rpx solid #F4F8F8;">
				<!-- 				<view class="flex-col-center">
					<image src="../../static/images/forum/deepshare.png" style="width: 52rpx;height: 52rpx;" mode="">
					</image>
					<view class="mt16 fz24" style="color: #7E8987;">
						分享
					</view>
				</view> -->
				<view class="flex-col-center">
					<image @click="clicknice"
						:src="forumd.isLike?'../../static/images/forum/isnice.png':'../../static/images/forum/deepnice.png'"
						style="width: 52rpx;height: 52rpx;" mode=""></image>
					<view class="mt16 fz24" style="color: #7E8987;">
						{{forumd.likeCount?forumd.likeCount:0}}
					</view>
				</view>
				<view class="flex-col-center">
					<image @click="clicklike"
						:src="forumd.isCollect?'../../static/images/forum/islike.png':'../../static/images/forum/deeplike.png'"
						style="width: 52rpx;height: 52rpx;" mode=""></image>
					<view class="mt16 fz24" style="color: #7E8987;">
						{{forumd.collectCount?forumd.collectCount:0}}
					</view>
				</view>


			</view>

		</view>
		<AdvCom :type='2'></AdvCom>

		<view class="bgfff mt16" style="padding: 0 24rpx; border-radius: 32rpx 32rpx 0 0;">
			<view class=" color303b39 align-center fz40" style="height: 96rpx; ">
				评论{{forumd.replyCount}}
			</view>
			<view class="plbox">
				<view v-for="(item,index) in forumd.replies" :key="index" class="flex-row"
					style="padding: 24rpx 0 0 0rpx;">
					<image style="width: 68rpx;height: 68rpx;border-radius: 50%;flex-shrink: 0;"
						:src="baseUrl+item.user.avatar" mode=""></image>
					<view class="" style="flex: 1;border-bottom: 1rpx solid #F4F8F8;padding-bottom: 40rpx;">
						<view class="ml16">
							<view class="flex-row justify-between">
								<view class="color303b39 fz32 fwbold">
									{{item.user.nickName}}
								</view>
								<view class="flex-row" @click="openlhsc(item)">
									<view class=""
										style="height:6rpx;width: 6rpx;background: #B8C3C1;border-radius: 50%;">
									</view>
									<view class=""
										style="margin: 0 6rpx;height:6rpx;width: 6rpx;background: #B8C3C1;border-radius: 50%;">
									</view>
									<view class=""
										style="height:6rpx;width: 6rpx;background: #B8C3C1;border-radius: 50%;">
									</view>
								</view>
							</view>
							<view class="mt16 color303b39" style=" font-size: 32rpx;">
								{{item.replyContent}}
							</view>
							<view class="mt25 flex-row align-center justify-between"
								style="color: #7E8987;font-size: 24rpx;height: 40rpx;">
								<view class="">
									<span>第{{index+2}}楼</span> <span
										style="margin: 0 14rpx 0 6rpx;">{{item.createTime ? item.createTime : ''}}</span>
									<!-- <span>{{item.userArea}}</span> -->
								</view>
								<view class="flex-row-center">
									<view class="flex-row align-center mr25" @click="pltalk(item.id)">
										<image src="../../static/images/forum/backtalk.png" @click=""
											style="margin-right: 8rpx;width: 40rpx;height: 40rpx;" mode=""></image> 回复
									</view>
									<view class="flex-row align-center" @click="clickhfnice(item)">
										<image
											:src="item.isLike?'../../static/images/forum/isnice.png':'../../static/images/forum/nice.png'"
											style="width: 40rpx;height: 40rpx;" mode=""></image> 点赞
									</view>
								</view>
							</view>
							<view v-if="item.childReply&&item.childReply.length>0" @click="showhf(item.id)"
								class="mt25 hfbox" style="padding: 16rpx;background: #F4F8F8;border-radius: 24rpx;">
								<view class="flex-row hfli" v-for="(hfitem,hfindex) in item.childReply" :key="hfindex">
									<view class="fz32 fwbold flex-row-center"
										style="color: #576260;line-height: 56rpx;flex-shrink: 0;">
										{{hfitem.user.nickName}}
										<view class="flex-row-center" v-show="hfitem.pid!=item.id">
											<image style="width: 13rpx;height: 16rpx;margin: 0 7rpx;"
												src="../../static/images/forum/hfimg.png" mode=""></image>
											{{hfitem.pidName}}
										</view> :
									</view>
									<view class="fz32 color303b39 lineclamp1" style="line-height: 56rpx;">
										{{hfitem.replyContent}}
									</view>
								</view>
								<view class="" v-show="item.replyCount>2" style="font-size: 30rpx;color: #00977C;">
									查看{{item.replyCount}}条评论
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>

		</view>

		<view class="" style="position: fixed;bottom: 0;position: fixed;
			bottom: 0;
			height: 98rpx;
			width: 100%;
			background: #fff;
			z-index: 999;
			box-shadow: 4rpx 4rpx 16rpx 0px rgba(29, 70, 62, 0.16);
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 17rpx 16rpx 17rpx 24rpx;">
			<view @click="pltalk(null)" class="align-center"
				style="width: 461rpx;height: 64rpx;padding: 24rpx;color: #7E8987;font-size: 28rpx;background: #F4F8F8;border-radius: 60rpx;">
				<image src="../../static/images/forum/pen.png" style="width: 28rpx;height: 32rpx;margin-right: 8rpx;"
					mode=""></image>
				<span>我也来说两句...</span>
			</view>
			<view class="flex-row">
				<view class="pos-rel">
					<image style="width: 46rpx;height: 46rpx;" src="../../static/images/forum/botback.png" mode="">
					</image>
					<view class="pos-abs color303b39 br24"
						style="padding: 4rpx 8rpx 0;background: #fff;font-size: 18rpx;top: -5rpx;right: -12rpx;">
						{{forumd.replyCount}}
					</view>
				</view>
				<view class="ml30 mr30 pos-rel">
					<image @click="clicknice" style="width: 46rpx;height: 46rpx;"
						:src="forumd.isLike?'../../static/images/forum/isnice.png':'../../static/images/forum/deepnice.png'"
						mode=""></image>

					<view class="pos-abs color303b39 br24"
						style="padding: 4rpx 8rpx 0;background: #fff;font-size: 18rpx;top: -5rpx;right: -12rpx;">
						{{forumd.likeCount}}
					</view>
				</view>
				<view class="">
					<image @click="clicklike" style="width: 46rpx;height: 46rpx;"
						:src="forumd.isCollect?'../../static/images/forum/islike.png':'../../static/images/forum/deeplike.png'"
						mode=""></image>
				</view>
			</view>
		</view>

		<u-popup v-model="hfshow" mode="bottom" :closeable="true">
			<view class="hfpopup" v-if="hfshow">
				<view class="bgfff justify-center align-center color303b39 fz40 fwbold"
					style="height: 104rpx;border-radius: 32rpx 32rpx 0px 0px;">
					评论回复
				</view>
				<view class="flex-row bgfff" style="padding: 24rpx;border-radius: 0 0 32rpx 32rpx;">
					<image style="width: 68rpx;height: 68rpx;border-radius: 50%;flex-shrink: 0;"
						:src="baseUrl+plobj.user.avatar" mode=""></image>
					<view class="" style="flex: 1;">
						<view class="ml16">
							<view class="flex-row justify-between">
								<view class="flex-row-center">
									<view class="color303b39 fz32 fwbold">
										{{plobj.user.nickName}}
									</view>
									<view class="fz20 align-center justify-center"
										style="margin-left: 8rpx;padding: 4rpx 8rpx;color: #00D9B2;border-radius: 8rpx;border: 1rpx solid;border-image: linear-gradient(140deg, rgba(78, 242, 201, 1), rgba(0, 217, 178, 1)) 1 1;">
										楼主
									</view>
								</view>

								<view class="flex-row" @click="openlhsc(plobj)">
									<view class=""
										style="height:6rpx;width: 6rpx;background: #B8C3C1;border-radius: 50%;">
									</view>
									<view class=""
										style="margin: 0 6rpx;height:6rpx;width: 6rpx;background: #B8C3C1;border-radius: 50%;">
									</view>
									<view class=""
										style="height:6rpx;width: 6rpx;background: #B8C3C1;border-radius: 50%;">
									</view>
								</view>
							</view>
							<view class="mt16 color303b39" style=" font-size: 32rpx;">
								{{plobj.replyContent}}
							</view>
							<view class="mt25 flex-row align-center justify-between"
								style="color: #7E8987;font-size: 24rpx;height: 40rpx;">
								<view class="">
									<span
										style="margin: 0 14rpx 0 6rpx;">{{plobj.createTime?plobj.createTime.slice(0,10):''}}</span>
									<span>{{plobj.userArea}}</span>
								</view>
								<view class="flex-row-center">
									<view class="flex-row align-center mr25" @click="pltalk(plobj.id)">
										<image src="../../static/images/forum/backtalk.png"
											style="margin-right: 8rpx;width: 40rpx;height: 40rpx;" mode=""></image> 回复
									</view>
									<view class="flex-row align-center" @click="clickhfnice(plobj)">
										<image
											:src="plobj.isLike?'../../static/images/forum/isnice.png':'../../static/images/forum/nice.png'"
											style="width: 40rpx;height: 40rpx;" mode=""></image> 点赞
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="mt16 bgfff" style="border-radius: 32rpx 32rpx 0 0;">
					<view class=" bgfff align-center color303b39 fz40 fwbold" style="height: 96rpx;padding: 0 24rpx;">
						回复&ensp;{{plobj.replyCount}}
					</view>
					<view class="" style="padding-bottom: 106rpx;">
						<view v-for="(item,index) in plobj.childReply" :key="index" class="flex-row"
							style="padding: 24rpx;">
							<image style="width: 68rpx;height: 68rpx;border-radius: 50%;flex-shrink: 0;"
								:src="baseUrl+item.user.avatar" mode=""></image>
							<view class="" style="flex: 1;border-bottom: 1rpx solid #F4F8F8;padding-bottom: 40rpx;">
								<view class="ml16">
									<view class="flex-row justify-between">
										<view class="color303b39 fz32 fwbold flex-row-center">
											{{item.user.nickName}}
											<view class="flex-row-center" v-show="item.pid!=plobj.id">
												<image style="width: 13rpx;height: 16rpx;margin: 0 7rpx;"
													src="../../static/images/forum/hfimg.png" mode=""></image>
												{{item.pidName}}
											</view>
										</view>
										<view class="flex-row" @click="openlhsc(item)">
											<view class=""
												style="height:6rpx;width: 6rpx;background: #B8C3C1;border-radius: 50%;">
											</view>
											<view class=""
												style="margin: 0 6rpx;height:6rpx;width: 6rpx;background: #B8C3C1;border-radius: 50%;">
											</view>
											<view class=""
												style="height:6rpx;width: 6rpx;background: #B8C3C1;border-radius: 50%;">
											</view>
										</view>
									</view>
									<view class="mt16 color303b39" style=" font-size: 32rpx;">
										{{item.replyContent}}
									</view>
									<view class="mt25 flex-row align-center justify-between"
										style="color: #7E8987;font-size: 24rpx;height: 40rpx;">
										<view class="">
											<span
												style="margin: 0 14rpx 0 6rpx;">{{item.createTime?item.createTime.slice(0,10):''}}</span>
											<span>{{item.userArea}}</span>
										</view>
										<view class="flex-row-center">
											<view class="flex-row align-center mr25" @click="pltalk(item.id)">
												<image src="../../static/images/forum/backtalk.png"
													style="margin-right: 8rpx;width: 40rpx;height: 40rpx;" mode="">
												</image> 回复
											</view>
											<view class="flex-row align-center" @click="clickhfnice(item)">
												<image
													:src="item.isLike?'../../static/images/forum/isnice.png':'../../static/images/forum/nice.png'"
													style="width: 40rpx;height: 40rpx;" mode=""></image> 点赞
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="" style="position: fixed;bottom: 0;position: fixed;
				bottom: 0;
				height: 98rpx;
				width: 100%;
				background: #fff;
				z-index: 999;
				box-shadow: 4rpx 4rpx 16rpx 0px rgba(29, 70, 62, 0.16);
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 17rpx 16rpx 17rpx 24rpx;">
				<view class="align-center" @click="pltalk(plobj.id)"
					style="width: 461rpx;height: 64rpx;padding: 24rpx;color: #7E8987;font-size: 28rpx;background: #F4F8F8;border-radius: 60rpx;">
					<image src="../../static/images/forum/pen.png"
						style="width: 28rpx;height: 32rpx;margin-right: 8rpx;" mode=""></image>
					<span>我也来说两句...</span>
				</view>
				<view class="flex-row">
					<view class="pos-rel">
						<image style="width: 46rpx;height: 46rpx;" src="../../static/images/forum/botback.png" mode="">
						</image>
						<view class="pos-abs color303b39 br24"
							style="padding: 4rpx 8rpx 0;background: #fff;font-size: 18rpx;top: -5rpx;right: -12rpx;">
							{{forumd.replyCount}}
						</view>
					</view>
					<view class="ml30 mr30 pos-rel">
						<image @click="clicknice" style="width: 46rpx;height: 46rpx;"
							:src="forumd.isLike?'../../static/images/forum/isnice.png':'../../static/images/forum/deepnice.png'"
							mode=""></image>

						<view class="pos-abs color303b39 br24"
							style="padding: 4rpx 8rpx 0;background: #fff;font-size: 18rpx;top: -5rpx;right: -12rpx;">
							{{forumd.likeCount}}
						</view>
					</view>
					<view class="">
						<image style="width: 46rpx;height: 46rpx;"
							:src="forumd.isCollect?'../../static/images/forum/islike.png':'../../static/images/forum/deeplike.png'"
							mode=""></image>
					</view>
				</view>
			</view>
		</u-popup>


		<u-popup v-model="lhshow" mode="bottom">
			<view class="bgfff" style="padding: 64rpx 41rpx 24rpx;">
				<view class="justify-around align-center">
					<view class="justify-center align-center flex-col" @click="tojbpage">
						<image src="../../static/images/forum/jubao.png"
							style="width: 56rpx;height: 56rpx;margin-bottom: 16rpx;" mode=""></image>
						<view class="color303b39 ">
							举报
						</view>
					</view>
					<view class="justify-center align-center flex-col" @click="delshow = true">
						<image src="../../static/images/forum/delete.png"
							style="width: 56rpx;height: 56rpx;margin-bottom: 16rpx;" mode=""></image>
						<view class="color303b39 ">
							删除
						</view>
					</view>
				</view>

				<view class="mt40 align-center justify-center" style="height: 100rpx;">
					<span @click="lhshow = false">取消</span>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="delshow" :show-cancel-button="true" :confirm-text="'删除'" @confirm="delpost"
			@cancel="nodelpost" :cancel-text="'取消'" content="是否删除该评论？"></u-modal>


		<u-popup v-model="talkshow" mode="bottom">
			<view class="bgfff" style="padding: 40rpx 24rpx;">
				<view class="justify-between align-center">
					<textarea v-model="comment"
						style="background: #F4F8F8;height: 123rpx;border-radius: 24rpx; padding: 24rpx;" name="" id=""
						cols="30" rows="10" placeholder="我也说两句.." :adjust-position="false" :focus='focusState'
						ref='textareaid'></textarea>
					<view class="align-end ml16" style="height: 123rpx;">
						<view class=" justify-center align-center colorfff fz26" @click="releasepl(pid)"
							style="width: 110rpx;height: 52rpx;background: linear-gradient( 90deg, #43FFDE 0%, #43E859 100%);border-radius: 52rpx;">
							发布
						</view>
					</view>

				</view>
			</view>
		</u-popup>
		<!-- <u-toast ref="uToast" /> -->
	</view>
</template>

<script>
	import AdvCom from '../../layouts/advcome.vue';
	import config from '@/config'
	import {
		getInvitation,
		getAnyReply,
		invlike,
		replylike,
		addReply,
		invcollectAdd,
		delReply
	} from '@/api/api.js'
	import {
		getInfo
	} from '@/api/login'
	export default {
		components: {
			AdvCom
		},
		onLoad(options) {
			this.tzid = options.id
			getInvitation(options.id).then(res => {
				this.forumd = res.data
				if (this.forumd.attachFiles.length > 0) {
					this.forumd.attachFiles.forEach(item => {
						this.imgurls.push(item.url)
					})
				}
			})

		},


		data() {
			return {
				baseUrl: config.baseUrl,
				forumd: {},
				hfshow: false,
				plobj: {},
				lhshow: false,
				talkshow: false,
				focusState: false,
				comment: '',
				pid: null,
				imgurls: [],
				lhdelid: 0,
				delshow: false,
				tzid: 0,
				disname: '',

			}
		},
		watch: {
			talkshow(newValue, oldValue) {
				if (newValue == false) {
					this.focusState = false
				}
			},
			hfshow(newValue, oldValue) {
				if (newValue == false) {
					this.plobj = {}
				}
			},
			talkshow(newValue, oldValue) {
				if (newValue == false) {
					this.comment = ''
				}
			},


		},
		created() {
			this.getuser()
		},
		methods: {
			getuser() {
				getInfo().then(res => {
					this.disname = res.userDocument.diseaseName
				})
			},
			tojbpage() {
				uni.navigateTo({
					url: "/pages/forum/reportpage?type=1&plid=" + this.lhdelid + "&tzid=" + this.tzid
				})
			},
			openlhsc(item) {
				this.lhshow = true
				this.lhdelid = item.id
			},
			delpost() {
				delReply(this.lhdelid).then(res => {
					// this.$refs.uToast.show({
					// 	title: '评论已删除',
					// 	type: 'success',
					// })
					this.lhshow = false
					if (this.plobj.id) {
						getAnyReply(this.plobj.id).then(res => {
							this.plobj = res.data
						})
					}
					getInvitation(this.forumd.id).then(res => {
						this.forumd = res.data
					})
				})
			},

			nodelpost() {
				this.delshow = false;
			},
			watchimg(index) {
				uni.previewImage({
					urls: this.imgurls,
					current: index,
					// 下面我这边做的都是默认的选择
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {},
						fail: function(err) {

						}
					}
				});
			},
			pltalk(pid) {
				this.pid = pid
				this.talkshow = true
				this.$nextTick(() => {
					this.focusState = true
				}, 100)
			},
			releasepl(pid) {
				let data = {
					invitationId: this.forumd.id,
					pid: pid,
					replyContent: this.comment
				}
				addReply(data).then(res => {
					// this.$refs.uToast.show({
					// 	title: '评论成功',
					// 	type: 'success',
					// })
					// 判断是评论帖子还是回复
					if (pid) {
						// 判断该刷新哪个页面的数据（详情页or评论弹窗）
						if (this.plobj.id) {
							getAnyReply(this.plobj.id).then(res => {
								this.plobj = res.data
							})
						}
						getInvitation(this.forumd.id).then(res => {
							this.forumd = res.data
						})


					} else {
						getInvitation(this.forumd.id).then(res => {
							this.forumd = res.data
						})
					}
					this.talkshow = false
				})
			},
			clicknice() {
				let status = 0
				this.forumd.isLike = !this.forumd.isLike
				if (this.forumd.isLike == true) {
					status = 0
					this.forumd.likeCount++
				} else {
					status = 1
					this.forumd.likeCount--
				}
				let data = {
					invitationId: this.forumd.id,
					status: status
				}
				invlike(data).then(res => {})
			},
			clicklike() {
				let status = 0
				this.forumd.isCollect = !this.forumd.isCollect
				if (this.forumd.isCollect == true) {
					status = 0
					this.forumd.collectCount++
				} else {
					status = 1
					this.forumd.collectCount--
				}
				let data = {
					invitationId: this.forumd.id,
					status: status
				}
				invcollectAdd(data).then(res => {})
			},
			clickhfnice(item) {
				let status = 0
				item.isLike = !item.isLike
				if (item.isLike == true) {
					status = 0
					item.likeCount++
				} else {
					status = 1
					item.likeCount--
				}
				let data = {
					invitationId: item.invitationId,
					replyId: item.id,
					status: status
				}
				replylike(data).then(res => {})
			},
			showhf(id) {
				this.plobj = {}
				getAnyReply(id).then(res => {
					this.plobj = res.data
				})
				this.hfshow = true
			},
			backpage() {
				uni.navigateBack({
					delta: 1
				});
			}

		},

	}
</script>

<style lang="scss" scoped>
	::v-deep .u-drawer-bottom {
		background: transparent;
	}

	::v-deep .uni-scroll-view {
		border-radius: 32rpx 32rpx 0 0;
	}

	.pagebody {
		padding-bottom: 136rpx;
		background: #F0F6F5;

		.topbox {
			height: 128rpx;
			background: linear-gradient(180deg, rgba(0, 217, 178, 0.2) 0%, rgba(0, 217, 178, 0) 100%);
			padding: 20rpx 24rpx;
		}

		.content {
			padding: 10rpx 0;
			color: #303b39;
			font-size: 36rpx;
			line-height: 32rpx;
			line-height: 72rpx;
			margin-top: 16rpx;
			margin-bottom: 16rpx;

			::v-deep h2 {
				color: #303b39;
				font-weight: bold;
				line-height: 72rpx;
				font-size: 36rpx;
				margin-top: 24rpx;
				margin-bottom: 24rpx;
				line-height: 60rpx;
				text-indent: 72rpx;
			}

			::v-deep h3 {
				color: #303b39;
				font-weight: bold;
				line-height: 72rpx;
				margin-top: 16rpx;
				font-size: 36rpx;
				margin-bottom: 16rpx;
				text-indent: 72rpx;
			}

			::v-deep h4 {
				color: #303b39;
				font-weight: bold;
				margin-top: 16rpx;
				line-height: 72rpx;
				font-size: 36rpx;
				margin-bottom: 16rpx;
				text-indent: 72rpx;
			}

			::v-deep p {
				color: #303b39;
				font-size: 36rpx;
				line-height: 32rpx;
				line-height: 72rpx;
				margin-top: 16rpx;
				margin-bottom: 16rpx;
				text-indent: 72rpx;
			}

			::v-deep a {
				font-size: 36rpx;
				color: #0078ff;
			}
		}

		.imgbox {
			height: 220rpx;
			width: 220rpx;
			background-size: cover !important;
			border-radius: 0rpx;
			background-position: center !important;
			margin: 0 15rpx 15rpx 0;
		}

		.hfbox {
			.hfli:nth-last-child(1) {
				margin-bottom: 0rpx;
			}

			.hfli {
				margin-bottom: 10rpx;
			}
		}

		.hfpopup {
			background: #F0F6F5;
			border-radius: 32rpx 32rpx 0px 0px;
			max-height: 1200rpx;
		}
	}
</style>